﻿<template>
    <div class="l-rblock l-form-viewer erpCase" style="padding:8px;">
        <el-form :model="formData" :rules="rules" size="mini" labelPosition="right" labelWidth="100px" ref="form">
            <div class="l-auto-window only-tabs">
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane class="l-tabs-container" :label="$t('主表信息')" name="tab0">
                        <el-row :gutter="16">
                            <div class="l-rblock">
                                <div class="l-title form_name">{{ $t('基础信息') }}</div>
                                <el-col v-if="lr_formLookAuth('case_erp_sale_f_Number')" :span="12">
                                    <el-form-item :label="$t('销售单号')" prop="case_erp_sale_f_Number">
                                        <l-code v-if="formData.case_erp_sale_f_IsSysNum == 0" size="mini"
                                            code="erp_sale_number" v-model="formData.case_erp_sale_f_Number" />
                                        <el-input v-if="formData.case_erp_sale_f_IsSysNum != 0" :disabled="isEdit"
                                            v-model="formData.case_erp_sale_f_Number" :placeholder="$t('请输入')">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('case_erp_sale_f_IsSysNum')" :span="12">
                                    <el-form-item :label="$t('')" prop="case_erp_sale_f_IsSysNum" labelWidth="0px">
                                        <el-checkbox :disabled="isEdit" v-model="formData.case_erp_sale_f_IsSysNum"
                                            :false-label="1" :true-label="0" @change="checkChange">{{
                                                $t('用系统编号')
                                            }}</el-checkbox>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('case_erp_sale_f_Theme')" :span="24">
                                    <el-form-item :label="$t('订单主题')" prop="case_erp_sale_f_Theme">
                                        <el-input :disabled="!lr_formEditAuth('case_erp_sale_f_Theme', isReadOnly)"
                                            v-model="formData.case_erp_sale_f_Theme" :placeholder="$t('请输入')">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('case_erp_sale_f_SaleDate')" :span="12">
                                    <el-form-item :label="$t('销售日期')" prop="case_erp_sale_f_SaleDate">
                                        <l-date :disabled="!lr_formEditAuth('case_erp_sale_f_SaleDate', isReadOnly)"
                                            :readonly="false" format="yyyy-MM-dd" dateType="date" :clearable="true"
                                            v-model="formData.case_erp_sale_f_SaleDate" :placeholder="$t('请选择')" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('case_erp_sale_f_ClientName')" :span="12">
                                    <el-form-item :label="$t('客户名称')" prop="case_erp_sale_f_ClientName">
                                        <l-layer-select
                                            :disabled="!lr_formEditAuth('case_erp_sale_f_ClientName', false || isReadOnly)"
                                            :isPage="true" :height="504" :width="960"
                                            :columns="[{ 'label': '客户名称', 'prop': 'f_name', 'valueKey': '', 'minWidth': '150', 'align': 'left', 'hidden': false }, { 'label': '客户类型', 'prop': 'f_type', 'valueKey': '', 'minWidth': 100, 'align': 'left', 'hidden': false }, { 'label': '联系人', 'prop': 'f_defaultname', 'valueKey': '1671439472383_23205', 'minWidth': 100, 'align': 'left', 'hidden': false }, { 'label': '联系方式', 'prop': 'f_defaultphone', 'valueKey': '1671439473821_21320', 'minWidth': 100, 'align': 'left', 'hidden': false }, { 'label': '所在行业', 'prop': 'f_industry', 'valueKey': '', 'minWidth': 100, 'align': 'left', 'hidden': false }]"
                                            :options="case_erp_sale_f_ClientNameOptions"
                                            v-model="formData.case_erp_sale_f_ClientName"
                                            @change="case_erp_sale_f_ClientName_change" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('case_erp_sale_f_ClientPerson')" :span="12">
                                    <el-form-item :label="$t('联系人')" prop="case_erp_sale_f_ClientPerson">
                                        <el-input
                                            :disabled="!lr_formEditAuth('case_erp_sale_f_ClientPerson', isReadOnly)"
                                            :readonly="true" v-model="formData.case_erp_sale_f_ClientPerson"
                                            :placeholder="$t('请输入')">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('case_erp_sale_f_ClientWay')" :span="12">
                                    <el-form-item :label="$t('联系方式')" prop="case_erp_sale_f_ClientWay">
                                        <el-input :disabled="!lr_formEditAuth('case_erp_sale_f_ClientWay', isReadOnly)"
                                            :readonly="true" v-model="formData.case_erp_sale_f_ClientWay"
                                            :placeholder="$t('请输入')">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('case_erp_sale_f_Manager')" :span="12">
                                    <el-form-item :label="$t('客户经理')" prop="case_erp_sale_f_Manager">
                                        <!-- <el-input :disabled="!lr_formEditAuth('case_erp_sale_f_Manager', isReadOnly)"
                                            :readonly="true" v-model="formData.case_erp_sale_f_Manager"
                                            :placeholder="$t('请输入')">
                                        </el-input> -->
                                        <l-user-select v-model="formData.case_erp_sale_f_Manager"
                                            disabled></l-user-select>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('case_erp_sale_f_Dep')" :span="12">
                                    <el-form-item :label="$t('所属部门')" prop="case_erp_sale_f_Dep">
                                        <el-input :disabled="!lr_formEditAuth('case_erp_sale_f_Dep', isReadOnly)"
                                            :readonly="true" v-model="formData.case_erp_sale_f_Dep"
                                            :placeholder="$t('请输入')">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('case_erp_sale_f_Phone')" :span="12">
                                    <el-form-item :label="$t('联系电话')" prop="case_erp_sale_f_Phone">
                                        <el-input :disabled="!lr_formEditAuth('case_erp_sale_f_Phone', isReadOnly)"
                                            :readonly="true" v-model="formData.case_erp_sale_f_Phone"
                                            :placeholder="$t('请输入')">
                                        </el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col v-if="lr_formLookAuth('case_erp_sale_f_PayType')" :span="12">
                                    <el-form-item :label="$t('结算方式')" prop="case_erp_sale_f_PayType">
                                        <l-select
                                            :disabled="!lr_formEditAuth('case_erp_sale_f_PayType', false || isReadOnly)"
                                            :options="case_erp_sale_f_PayTypeOptions"
                                            v-model="formData.case_erp_sale_f_PayType" />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('case_erp_sale_f_ClientNumber')" :span="12">
                                    <el-form-item :label="$t('客户订单号')" prop="case_erp_sale_f_ClientNumber">
                                        <el-input
                                            :disabled="!lr_formEditAuth('case_erp_sale_f_ClientNumber', isReadOnly)"
                                            v-model="formData.case_erp_sale_f_ClientNumber" :placeholder="$t('请输入')">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('case_erp_sale_f_PayAddress')" :span="24">
                                    <el-form-item :label="$t('交货地址')" prop="case_erp_sale_f_PayAddress">
                                        <el-input :disabled="!lr_formEditAuth('case_erp_sale_f_PayAddress', isReadOnly)"
                                            v-model="formData.case_erp_sale_f_PayAddress" :placeholder="$t('请输入')">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <!-- case_erp_saledetail_f_UnitOptions -->
                                <el-col v-if="lr_formLookAuth('case_erp_sale_f_Description')" :span="24">
                                    <el-form-item :label="$t('备注')" prop="case_erp_sale_f_Description">
                                        <el-input type="textarea"
                                            :disabled="!lr_formEditAuth('case_erp_sale_f_Description', isReadOnly)"
                                            v-model="formData.case_erp_sale_f_Description" :placeholder="$t('请输入')" />
                                    </el-form-item>
                                </el-col>

                                <el-col v-if="lr_formLookAuth('1670481739858_99913')" :span="24" class="table_width">
                                    <div class="form_flex">
                                        <div class="l-title form_name">{{ $t('产品明细') }}</div>
                                        <el-button size="mini" type="primary" @click="AddRow">{{ $t('添加') }}</el-button>
                                        <el-button size="mini" type="danger" @click="DeleteRow">{{
                                            $t('删除')
                                        }}</el-button>
                                    </div>

                                    <el-col :span="24">
                                        <l-edit-table :isAddBtn="false" isMultiSelect ref="mainTable"
                                            :columns="lr_formTableAuth('case_erp_saledetail', case_erp_saledetail_columns)"
                                            :dataSource="case_erp_saledetail_data" height="200px"
                                            :summaryList="[{ label: '总量', prop: 'f_Count', decimals: 0, }, { label: '总金额', prop: 'f_AfterTaxAmount', }]"
                                            showSummary2 rowKey="index">
                                            <!-- <template v-slot:f_Unit="scope">
                                                {{ 单位 }}
                                            </template> -->
                                            <template v-slot:f_Price="scope">
                                                <el-input
                                                    v-model="scope.row.f_Price" size="mini"
                                                    :disabled="!lr_formEditAuth('f_Price', false || isReadOnly)">
                                                    <template slot="append">{{ $t('元') }}</template>
                                                    </el-input>
                                            </template>
                                            <template v-slot:f_Count="scope">
                                                <el-input size="mini" v-model="scope.row.f_Count">
                                                    <template slot="append">{{ $t('个') }}</template>
                                                </el-input>
                                            </template>
                                            <template v-slot:f_Discount="scope">
                                                <el-input size="mini" v-model="scope.row.f_Discount"
                                                    :disabled="!lr_formEditAuth('f_Discount', false || isReadOnly)">
                                                    <template slot="append">{{ $t('%') }}</template>
                                                </el-input>
                                            </template>
                                            <template v-slot:f_TaxRate="scope">
                                                <el-input size="mini" v-model="scope.row.f_TaxRate"
                                                    :disabled="!lr_formEditAuth('f_TaxRate', false || isReadOnly)">
                                                    <template slot="append">%</template>
                                                </el-input>
                                            </template>
                                            <template v-slot:f_TaxBreak="scope">
                                                <el-input size="mini" v-model="scope.row.f_TaxBreak" disabled>
                                                    <template slot="append">{{ $t('元') }}</template>
                                                </el-input>
                                            </template>
                                            <template v-slot:f_DeliveryDate="scope">
                                                <l-date :readonly="false" format="yyyy-MM-dd" dateType="date"
                                                    :clearable="true" size="mini" v-model="scope.row.f_DeliveryDate"
                                                    :disabled="!lr_formEditAuth('f_DeliveryDate', false || isReadOnly)" />
                                            </template>

                                            <template v-slot:f_Description="scope">
                                                <el-input size="mini" v-model="scope.row.f_Description"
                                                    :disabled="!lr_formEditAuth('f_Description', false || isReadOnly)" />
                                            </template>
                                        </l-edit-table>
                                    </el-col>
                                    <el-col v-if="lr_formLookAuth('case_erp_sale_f_File')" :span="24"
                                        style="margin-top: 40px;">
                                        <el-col :span="24">
                                            <div class="learun-form-title mt-8">
                                                {{ $t('附件') }}<span v-if="fileCount > 0">({{ fileCount }})</span>
                                            </div>
                                        </el-col>
                                        <el-col v-if="lr_formLookAuth('case_erp_sale_f_File')" :span="24">
                                            <el-form-item prop="case_erp_sale_f_File" labelWidth="0">
                                                <l-upload drag maxSize="10" sizeType="MB" :limit="3"
                                                    showFileList="uploadTheme1" :disabled="
                                                        !lr_formEditAuth(
                                                            'case_erp_sale_f_File',
                                                            false || isReadOnly
                                                        )
                                                    " v-model="formData.case_erp_sale_f_File" @load="fileLoad"
                                                    @success="fileLoad" @remove="fileLoad" />
                                            </el-form-item>
                                        </el-col>
                                    </el-col>
                                </el-col>
                            </div>
                        </el-row>
                    </el-tab-pane>

                </el-tabs>
            </div>
        </el-form>
        <!-- 表单 -->
        <l-dialog :visible.sync="formVisible" :height="800" :width="1000" @ok="handleSave">
            <l-choose-material ref="choseForm" />
        </l-dialog>

    </div>
</template>
<script>
const api = window.$api.erpcase.sale
export default {
    props: {
        isReadOnly: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            moduleCode: 'ERP_Sale',
            activeName: 'tab0',
            formData: {
                case_erp_sale_f_Number: "", // 销售单号
                case_erp_sale_f_IsSysNum: 0, // 用系统编号
                case_erp_sale_f_Theme: "", // 订单主题
                case_erp_sale_f_SaleDate: "", // 销售日期
                case_erp_sale_f_ClientName: "", // 客户名称
                case_erp_sale_f_ClientPerson: "", // 联系人
                case_erp_sale_f_ClientWay: "", // 联系方式
                case_erp_sale_f_Manager: "", // 客户经理
                case_erp_sale_f_Dep: "", // 所属部门
                case_erp_sale_f_Phone: "", // 联系电话
                case_erp_sale_f_PayType: "", // 结算方式
                case_erp_sale_f_ClientNumber: "", // 客户订单号
                case_erp_sale_f_PayAddress: "", // 交货地址
                case_erp_sale_f_Description: "", // 备注
                case_erp_sale_f_File: "", // 附件

            },
            rules: {
                case_erp_sale_f_Number: [{ required: true, message: '请输入销售单号' },],
                case_erp_sale_f_Theme: [
                    { required: true, message: '请输入订单主题' },
                ],
            },
            case_erp_saledetail_columns: [
                { id: 'case_erp_saledetail_F_Number', width: '130', prop: 'f_Number', label: '产品编码' },
                { id: 'case_erp_saledetail_F_Name', width: '130', prop: 'f_Name', label: '产品名称' },
                { id: 'case_erp_saledetail_F_Model', width: '130', prop: 'f_Model', label: '规格型号' },
                // { id: 'case_erp_saledetail_F_Unit', width: '130', prop: 'f_Unit', label: '单位',},
                { id: 'case_erp_saledetail_F_Price', width: '130', prop: 'f_Price', label: '单价', },
                { id: 'case_erp_saledetail_F_Count', prop: 'f_Count', label: '销售数量', width: '130' }, //, isSummary: true 
                { id: 'case_erp_saledetail_F_Discount', prop: 'f_Discount', label: '折扣', width: '130' },
                { id: 'case_erp_saledetail_F_TaxRate', prop: 'f_TaxRate', label: '税率', width: '130' },
                { id: 'case_erp_saledetail_F_TaxBreak', prop: 'f_TaxBreak', label: '税费', width: '130' },
                { id: 'case_erp_saledetail_F_AfterTaxAmount', prop: 'f_AfterTaxAmount', label: '税后金额' }, //, isSummary: true 
                { id: 'case_erp_saledetail_F_DeliveryDate', prop: 'f_DeliveryDate', label: '交付日期', width: '150' },
                { id: 'case_erp_saledetail_F_Description', prop: 'f_Description', label: '备注', width: '130' },
            ],
            case_erp_saledetail_data: [],
            isEdit: false,
            //  表单
            formVisible: false,

            fileCount: 0,
        };
    },
    watch: {
        case_erp_saledetail_data: {
            handler(newVal) {

                for (let i in newVal) {
                    let allMoney = newVal[i].f_Count * newVal[i].f_Price
                    let money = allMoney * (newVal[i].f_Discount * 0.01)
                    
                    newVal[i].f_TaxBreak =  (allMoney - money)* (newVal[i].f_TaxRate * 0.01)
                    newVal[i].f_AfterTaxAmount = newVal[i].f_Count * newVal[i].f_Price - money - newVal[i].f_TaxBreak
                }
            },
            deep: true
        },
    },
    computed: {
        case_erp_sale_f_ClientNameOptions() {
            const data = this.lr_DataSource('ERP_Customers')
            return this.lr_DataSourceOptions(data, 'f_id', 'f_name')
        },
         
        case_erp_saledetail_f_UnitOptions(){
            const data = this.lr_DataSource('ERP_Unit')
            return this.lr_DataSourceOptions(data,'f_id','f_name')
        },
        case_erp_sale_f_ClientWayOptions() {
            this.lr_loadDataItem('FollowType')
            return this.lr_dataItemOptions(this.lr_dataItem['FollowType'])
        },

        case_erp_sale_f_PayTypeOptions() {
            this.lr_loadDataItem('PurchaseType')
            return this.lr_dataItemOptions(this.lr_dataItem['PurchaseType'])
        },
    },
    methods: {
        //fileLoad
        fileLoad({ list }) {
            this.fileCount = list.length;
        },
        // table 合计
        // summaryMethod() {
        //     const params = this.$refs.mainTable.getSummaries()
        //     console.log("合计",params)
        // },
        // 批量删除
        DeleteRow() {
            let data = this.$refs.mainTable.getSelected()
            // console.log("批量删除", data)
            for (let i in data) {
                for (let j in this.case_erp_saledetail_data) {
                    if (data[i].index == this.case_erp_saledetail_data[j].index) {
                        this.case_erp_saledetail_data.splice(i, 1)
                    }
                }
            }
        },
        // 选择使用系统编码 
        checkChange() {
            this.formData.case_erp_sale_f_Number = ""
            if (parseInt(this.formData.case_erp_sale_f_IsSysNum) != 0) {
                this.rules.case_erp_sale_f_Number.push({
                    validator: this.lr_existDbFiled,
                    keyValue: () => { return this.formData.case_erp_sale_f_Number },
                    tableName: 'case_erp_sale',
                    keyName: 'f_Id',
                    fieldName: 'f_Number',
                    trigger: 'blur'
                });
            } else {
                // this.rules.case_erp_apply_f_Number.splice(1, 1);
            }
        },
        case_erp_sale_f_ClientName_change(changeData) {
            // console.log("选择客户", changeData)
            if (changeData) {
                this.$set(this.formData, 'case_erp_sale_f_ClientPerson', changeData.f_defaultname)
            }
            else {
                this.$set(this.formData, 'case_erp_sale_f_ClientPerson', undefined)
            }
            if (changeData) {
                this.$set(this.formData, 'case_erp_sale_f_Phone', changeData.f_defaultphone)
                // 联系方式
                this.$set(this.formData, 'case_erp_sale_f_ClientWay', changeData.f_defaultphone)
            }
            else {
                this.$set(this.formData, 'case_erp_sale_f_Phone', undefined)
            }

            // 客户经理
            if (changeData) {
                this.$set(this.formData, 'case_erp_sale_f_Manager', changeData.f_saleid)
            }
            else {
                this.$set(this.formData, 'case_erp_sale_f_Manager', undefined)
            }
            // 所属部门
            if (changeData) {
                this.$set(this.formData, 'case_erp_sale_f_Dep', changeData.f_defaultdep)
            }
            else {
                this.$set(this.formData, 'case_erp_sale_f_Dep', undefined)
            }

        },
        AddRow() {
            this.formVisible = true


        },

        async handleSave() {
            const data = await this.$refs.choseForm.getSelectData()
            // console.log('获取数据', data)
            let point = {}
            let i = 0
            for (i in data) {
                point.f_Number = data[i].f_Number
                point.f_Name = data[i].f_Name
                point.f_Model = data[i].f_Model
                point.f_Unit = data[i].f_Unit
                point.f_Price = ''
                point.f_Count = ''
                point.f_TaxRate = ''
                point.f_Discount = ''
                point.f_AfterTaxAmount = ''
                point.f_DeliveryDate = ""
                point.f_Description = ""
                point.index = this.case_erp_saledetail_data.length + 1
                // console.log('获取', point)
                this.case_erp_saledetail_data.push(this.$deepClone(point))
            }
            this.formVisible = false
        },


        // 重置表单
        resetForm() {
            this.$formClear(this.$refs.form)
            this.activeName = 'tab0'
            this.case_erp_saledetail_data = []
            this.fileCount = 0;
            this.isEdit = false;
        },
        // 校验表单
        async validateForm() {
            if (!await this.$formValidateWraper(this.$refs.form)) {
                return false
            }

            return true
        },
        // 设置表单数据
        setForm(data) {
            this.$setFormData(this.formData, data.caseErpSaleEntity, 'case_erp_sale')
            this.case_erp_saledetail_data = data.caseErpSaledetailList
            this.isEdit = true;
            

            // this.summaryMethod()
        },
        // 获取表单数据
        getForm() {
            const formData = {}
            formData.caseErpSaleEntity = this.$getFormData(this.formData, 'case_erp_sale')
            formData.caseErpSaledetailList = this.case_erp_saledetail_data
            formData.caseErpSaleEntity.f_Discount = 0
            formData.caseErpSaleEntity.f_AmountSum = 0
            // console.log("上传数据", formData)
            for (let i in formData.caseErpSaledetailList) {
                formData.caseErpSaleEntity.f_Discount = formData.caseErpSaleEntity.f_Discount +
                    formData.caseErpSaledetailList[i].f_AfterTaxAmount // 订单优惠后金额
                formData.caseErpSaleEntity.f_AmountSum = formData.caseErpSaleEntity.f_AmountSum + formData.caseErpSaledetailList[i].f_Count * formData.caseErpSaledetailList[i].f_Price


            }
            formData.caseErpSaleEntity.f_Discount = parseFloat(formData.caseErpSaleEntity.f_Discount).toFixed(2)
            formData.caseErpSaleEntity.f_AmountSum = parseFloat(formData.caseErpSaleEntity.f_AmountSum).toFixed(2)
            
            return formData

        },

        changeCheck() {
            this.formData.case_erp_sale_f_Number = ""
        },
        async loadFormData({ keyValue/*,params,node*/ }) {//  keyValue 流程中相当于流程processId,params 传递参数,node 流程节点
            const data = await this.$awaitWraper(api.get(keyValue))
            if (data) {
                this.setForm(data)
                return true
            }
            else {
                return false
            }
        },

        async saveForm({ keyValue, isEdit/*,code,node*/ }) {// isEdit 是否更新数据, keyValue 流程中相当于流程processId,code 表示流程中的操作码,node 流程节点
            const postData = this.getForm()
            if (isEdit) {// 编辑
                return await this.$awaitWraper(api.update(keyValue, postData))
            }
            else {// 新增
                postData.caseErpSaleEntity.f_SaveState = 0
                postData.caseErpSaleEntity.f_Id = keyValue

                return await this.$awaitWraper(api.add(postData))
            }
        },
    }
}
</script>
<style>
.table_width .el-table--border .el-table__cell:first-child .cell {
    width: 55px;
}
</style>